<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>省市联动</title>

	<style type="text/css">
		.box{
			width: 360px;
			min-height: 224px;
			margin: 50px auto;
			border: 1px solid #ccc;
			background-color: #dcfde9;
			position: relative;

		}
		.header{
			background-color: #83e280;
			color: #fff;
			text-align: center;
		}
		.header h4{
			margin: 0;
			height: 40px;
			line-height: 40px;

		}
		img{
			width: 50px;
			height: : 50px;
/*			position: relative;
			float: left;*/
			position: absolute;
			left: 10px;



		}
		.item button{
			height: 30px;
			background-color: #83e280;
			border-radius: 10px;
			border: 1px solid #ccc;
			margin: 5px 15px;
			color: #fff;
		}


	</style>

</head>
<body>
	<div class="box">		
		<div class="header">
			<img src="images/retun.png">
			<h4>请选择省份</h4>		
		</div>

		<div class="ares" style="position: relative; top: 0;left: 0;">
			<div class="province item">
				<button>广西壮族自治区</button>
				<button>广东省</button>
				<button>湖南省</button>
				<button>湖北省</button>
				<button>河南省</button>
				<button>四川省</button>
			</div>
			<div class="city item" style="position: absolute;left: 360px;width: 300px;height: 170px; border: 1px solid #93e6a4; background-color: #dcfde9; top: 5px;  display: none;">
				<button>柳州市</button>
				<button>南宁市</button>
				<button>桂林市</button>

				<button>广州市</button>
				<button>惠州市</button>
				<button>中山市</button>

				<button>长沙市</button>
				<button>衡阳市</button>
				<button>岳阳市</button>

				<button>武汉市</button>
				<button>黄石市</button>
				<button>荆州市</button>

			</div>
			<div class="area item" style="position: absolute;left: 661px;width: 300px;height: 160px; border: 1px solid #93e6a4; background-color: #dcfde9; top: 10px; display: none;">
				<button>鱼峰区</button>
				<button>城中区</button>

				<button>青秀区</button>
				<button>兴宁区</button>

				<button>叠彩区</button>
				<button>秀峰区</button>

				<button>白云区</button>
				<button>越秀区</button>

				<button>香洲区</button>
				<button>金湾区</button>
			</div>
			
		</div>
	</div>



<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">


		$('img').click(function(){
        var bares = $('.area').css('display');
        var bcity = $('.city').css ('display');
        console.log(bares);
        console.log(bcity)

        if (bares=='block') { 
	        $('.area').hide(); 

        }

        if (bcity=='block' && bares=='none') {  	   
    	    $('.city').hide();	
    	    $('.area').hide();
        }


    });


		// $('img').click(function(){
		// 	// console.log('-------')
		// 	$('.item').each(function(){
		// 		if ($(this).css('display')=='block') {
		// 			// console.log($(this).index())
		// 			var i =$(this).index()-1;
		// 			// $(this).css('display','none');
		// 			if(i >-1){
		// 				$('.item').hide();
		// 				$('.item:eq('+i+')').show();
		// 			}
  //                   console.log($(this).index())
		// 		}
		// 	})

		// })

	function showCity(btn){
		var pid = $(btn).val();
		// console.log(pid)

		$('.province').show();
		$('.area').hide();
		$('.city').show();

		$.get('city.json',function(res){
			$('.city').empty();
			for ( i=0; i< res.length;i++) {
				if (pid==res[i].pid) {
					btn='<button onclick="showArea(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
					$('.city').append(btn);
				}
			}
		});
	}

	function showArea(btn){
		$('.province').show();
		$('.area').show();
		$('.city').show();

		var pid=$(btn).val()
		$.get('area.json',function(res){
		$('.area').empty();
			for (i=0;i<res.length;i++) {
				if (pid==res[i].pid) {
					btn='<button value="'+res[i].id+'">'+res[i].name+'</button>';
					$('.area').append(btn);
				}
			}
		})
	}

	
	function InitPro(){
		$('.province').empty();
		$.get('province.json',function(res){
			for ( i=0; i<res.length; i++) {
				btn='<button onclick="showCity(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
				$('.province').append(btn);
				// console.log(res[i].pid)
			}
		})


	}
	InitPro()

</script>
</body>
</html>